<template>
  <div class="p-2">
    <h1>基础K线图</h1>
    <div ref="chartRef" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { listSymbols, listMarket } from '@/api/market/market';  // 替换原来的axios导入

// 添加props定义
const props = defineProps({
  symbol: {
    type: String,
    required: true
  }
});

const chartRef = ref<HTMLElement | null>(null);
const symbols = ref<string[]>([]); // 存储所有股票代码

const chartData = ref({
  categoryData: [] as string[],
  values: [] as number[][]
});

// 修改后的 fetchSymbols 函数
const fetchSymbols = async () => {
  try {
    const response = await listSymbols();
    symbols.value = response.data; // 根据实际接口返回结构调整
  } catch (error) {
    console.error('Error fetching symbols:', error);
  }
};

// 添加watch监听symbol变化
watch(
  () => props.symbol,
  (newVal) => {
    fetchData();
  }
);

// 修改后的 fetchData 函数
const fetchData = async () => {
  try {
    const response = await listMarket({
      symbol: props.symbol, // 使用props中的symbol
      pageSize: 1000,
      pageNum: 1
    });

    // 处理数据并更新 chartData
    const data = response.rows;
    chartData.value = {
      categoryData: data.map(item => {
        // 使用日期部分，去除时间
        const rawDate = item.time; // 假设原始格式为 "YYYY-MM-DD HH:mm:ss"
        return rawDate.split(' ')[0]; // 分割后取日期部分
      }),
      values: data.map((item) => [item.open, item.preclose, item.low, item.high])
    };

    renderChart(); // 数据获取后立即渲染图表
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// 渲染图表函数
function renderChart() {
  if (!chartRef.value) {
    return;
  }

  const myChart = echarts.init(chartRef.value);

  const option: echarts.EChartsOption = {
    xAxis: {
      type: 'category',
      data: chartData.value.categoryData,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      scale: true
    },
    series: [
      {
        type: 'candlestick',
        data: chartData.value.values,
        itemStyle: {
          color: '#ec0000', // 跌颜色，修改为红色
          color0: '#00da3c', // 涨颜色，修改为绿色
          borderColor: '#8A0000', // 跌边框颜色，修改为红色
          borderColor0: '#008F28' // 涨边框颜色，修改为绿色
        }
      }
    ],
    tooltip: {
      trigger: 'axis'
    }
  };

  myChart.setOption(option);
  window.addEventListener('resize', () => myChart.resize());
}

// 初始化时获取数据
onMounted(async () => {
  // 获取所有股票代码
  await fetchSymbols();
  // 请求默认股票数据
  await fetchData();
});
</script>
